<template>
	<div class="shopcar-container">
		<div class="goodlist">
		<!-- 商品列表区域 -->
		<div class="mui-card">
			<div class="mui-card-content" v-for="(item,i) in goodlists" :key="item.id">
				<div class="mui-card-content-inner">
					<mt-switch v-model="$store.getters.getGoodselect[item.id]" @change="selectedChanged(item.id,$store.getters.getGoodselect[item.id])"></mt-switch>
					<img :src="item.thumb_path"/>
					<div class="info">
						<h1>{{item.title}}</h1>
						<p>
							<span class="price">${{item.sell_price}}</span>
							<carnum :initCount="$store.getters.getGoodscount[item.id]" :goodsid="item.id" ></carnum>
							<a href="#" @click="remove(item.id,i)">删除</a>
						</p>
					</div>
				</div>
			</div>
			</div>
			</div>

		<!-- 结算区域 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner jiesuan">
						<div class="left">
							<p>总计(不含运费)</p>
							<p>以勾选商品<span class="price" style="color: red;">{{ $store.getters.getGoodsCountmount.count }}</span>件,总价<span class="price" style="color: red;">${{ $store.getters.getGoodsCountmount.amount }}</span></p>
						</div>
						<mt-button type="danger">去结算</mt-button>
				</div>
			</div>
		</div>
		</div>
</template>

<script>
	import carnum from '../subcomponent/shopcar-_numbox.vue'
	export default{
		data(){
			return{
				goodlists:[]
			}
		},
		created(){
			this.getgoodList()
		},
		methods:{
			getgoodList(){
				var idArr = []
				this.$store.state.car.forEach(item =>idArr.push(item.id));
				if(idArr.length <= 0){
					return
				}
				//获取商品列表
				this.$http.get("api/goods/getshopcarlist/"+idArr.join(",")).then( result=>{
					if(result.body.status === 0){
						this.goodlists= result.body.message
					}
				})
			},
			remove(id,index){
				//点击删除,把商品从store中根据传递的ID删除，同时把当前组件的goodlist中的商品数据用index删除
				this.goodlists.splice(index,1)
				this.$store.commit('removeFormCar',id)
			},
			selectedChanged(id,val){
				/* console.log(id+"---"+val) */
				this.$store.commit("updateselected",{id,selected:val})
				
			}
			
			
		},
		components:{
			carnum
		}
	}
</script>

<style lang="scss" scoped>
	.shopcar-container{
		background-color: #eee;
		overflow: hidden;
		.goodlist{
			.mui-card-content-inner{
				display: flex;
				align-items: center;
			}
			img{
				// margin-left: 5px;
				width: 60px;
				height: 60px;
			}
			h1{
				font-size: 14px;
			}
			.info{
				margin-left: 15px;
				.price{
					color: red;
					font-weight: bold;
				}
			}
		}
		.jiesuan{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
	}

			
		
</style>